<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="./common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鲜橙</title>
<!--加载head和footer公用的css开始-->
<link charset="utf-8" type="text/css" href="css/common.css" rel="stylesheet"/>
<!--加载head和footer公用的css结束-->
<!--加载service页面的css开始-->
<link charset="utf-8" type="text/css" href="css/index.css" rel="stylesheet"/>
<!--加载service页面的css结束-->
<!--加载公用的jquery的js开始-->
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<!--加载公用的jquery的js结束-->
<!--网页界面宽度随浏览器变化开始-->
<script type="text/javascript">
	$(document).ready(function(){
		var width = document.body.offsetWidth ;
		var w = width+"px";
		document.getElementById("headerActiveBac").style.width = w;
		document.getElementById("mainActiveBac1").style.width = w;
		document.getElementById("mainActiveBac2").style.width = w;
		document.getElementById("mainActiveBac3").style.width = w;
		document.getElementById("mainActiveBac4").style.width = w;
		document.getElementById("mainActiveBac1").style.height = "100%";
		document.getElementById("mainActiveBac2").style.height = "100%";
		document.getElementById("mainActiveBac3").style.height = "100%";
		document.getElementById("mainActiveBac4").style.height = "100%";
		document.getElementById("footerMaskBac").style.width = w;
		var mainRightExt = (document.body.offsetWidth-960)/2+238;
		mainExtRight = mainRightExt+"px";
		document.getElementById("mainMaskBigBac").style.width = mainExtRight;
		document.getElementById("headerShadowBac").style.width = w;
	});
	
	window.onresize = function(){
		var width = document.documentElement.clientWidth;
		var w = width+"px";
		var w = width+"px";
		document.getElementById("headerActiveBac").style.width = w;
		document.getElementById("mainActiveBac1").style.width = w;
		document.getElementById("mainActiveBac2").style.width = w;
		document.getElementById("mainActiveBac3").style.width = w;
		document.getElementById("mainActiveBac4").style.width = w;
		document.getElementById("mainActiveBac1").style.height = "100%";
		document.getElementById("mainActiveBac2").style.height = "100%";
		document.getElementById("mainActiveBac3").style.height = "100%";
		document.getElementById("mainActiveBac4").style.height = "100%";
		document.getElementById("footerMaskBac").style.width = w;
		var mainRightExt = (document.body.offsetWidth-960)/2+238;
		mainExtRight = mainRightExt+"px";
		document.getElementById("mainMaskBigBac").style.width = mainExtRight;
		document.getElementById("headerShadowBac").style.width = w;
	} 
</script>
<!--网页界面宽度随浏览器变化结束-->
<!--网页界面展示部分开始-->
<script type="text/javascript" src="js/jQuery.timers.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#showPic2").hide();
		$("#showPic3").hide();
		$("#showPic4").hide();
		$('body').everyTime('5s', loopPlay);
    });
</script>
<script type="text/javascript">
	function showPic(element){
				var num = element.id.substring(element.id.length-1,element.id.length);
				for(var i=1;i<=4;i++){
					if(num==i) continue;
					var showLiId1 = "showLi"+i;
					document.getElementById(showLiId1).style.backgroundImage = "url(image/mask_big.png)";
					document.getElementById(showLiId1).style.marginTop = "0px";
					document.getElementById(showLiId1).firstChild.style.marginTop = "20px";
					var showPicId1 = "#showPic"+i;
					var showPicId1_1 = "showPic"+i;
					if(document.getElementById(showPicId1_1).className=="picCurrent")
						$(showPicId1).fadeOut("slow");
					document.getElementById(showPicId1_1).className = "picHidden";
					var showPicId11 = "#extPic"+i;
					var showPicId11_1 = "extPic"+i;
					if(document.getElementById(showPicId11_1).className=="picCurrent")
						$(showPicId11).fadeOut("slow");
					document.getElementById(showPicId11_1).className = "picHidden";
				}
				element.style.backgroundImage = "url(image/mask_big_focus.png)";
				element.style.marginTop = "-8px";
				element.firstChild.style.marginTop = "28px";
				var showPicId = "#showPic"+num;
				var showPicId_1 = "showPic"+num;
				if(document.getElementById(showPicId_1).className == "picHidden")
					$(showPicId).fadeIn("slow");
				document.getElementById(showPicId_1).className = "picCurrent";
				var showPicId1 = "#extPic"+num;
				var showPicId1_1 = "extPic"+num;
				if(document.getElementById(showPicId1_1).className == "picHidden")
					$(showPicId1).fadeIn("slow");
				document.getElementById(showPicId1_1).className = "picCurrent";
				$('body').stopTime();
				$('body').everyTime('5s', loopPlay);
	}
	function loopPlay(){
		for(var i=1;i<=4;i++){
			var showLiId = "showLi"+i;
			var showPicId1 = "#showPic"+i;
			var showPicId1_1 = "showPic"+i;
			if(document.getElementById(showPicId1_1).className=="picCurrent"){
				i++;
				var tmp = "";
				if(i<=4)
					tmp = i;
				else
					tmp = 1;
				var showLi = "showLi"+tmp;
				showPic(document.getElementById(showLi));
				break;
			}
		}
	}
	function reLoopPic(){		
        loopPlay();
        $('body').everyTime('6s', loopPlay);
    }
</script>
<!--网页界面展示部分结束-->
<style type="text/css"></style>
</head>
<body>
<!--页面内容开始-->
<div id="headerActiveBac" style="position:absolute; height:100px; background:url(image/headbac.png) repeat; overflow:visible; z-index:-100;"></div>
<!-- <div id="headerShadowBac" style="position:absolute; height:100%; background:url(image/shadow.png) repeat-x scroll left top transparent; z-index:100;overflow:visible;margin-top:100px;"></div> -->
<div id="extPic1" class="picCurrent" style=" display:block;margin-top:100px; position:absolute; height:398px; overflow:visible; z-index:-100;"><img id="mainActiveBac1" src="upload${side1}"/></div>
<div id="extPic2" class="picHidden" style=" display:none; margin-top:100px; position:absolute; height:398px; overflow:visible; z-index:-100;"><img id="mainActiveBac2" src="upload${side2}"/></div>
<div id="extPic3" class="picHidden" style=" display:none;margin-top:100px; position:absolute; height:398px; overflow:visible; z-index:-100;"><img id="mainActiveBac3" src="upload${side3}"/></div>
<div id="extPic4" class="picHidden" style=" display:none;margin-top:100px; position:absolute; height:398px; overflow:visible; z-index:-100;"><img id="mainActiveBac4" src="upload${side4}"/></div>
<div id="headerShadowBac" style="position:absolute; height:6px; background:url(image/shadow.png) repeat-x scroll left top transparent; overflow:visible;margin-top:100px;z-index:100;"></div>
<div class="clearfloat"></div>
<div class="content">
  <!--页面头部开始-->
  <div class="header">
    <div id="header_logo"><a href="index.action"><img style="border:none;"src="image/logo.png" alt="logo"/></a></div>
    <div id="header_nav">
      <ul>
        <li><a style="color:#ea5404;" href="index.action">首页</a></li>
        <li><a href="about.html">关于鲜橙</a></li>
        <li><a  href="LoadCase.action">鲜橙案例</a></li>
        <li><a href="service.jsp">鲜橙服务</a></li>
        <li><a href="LoadProduct.action">鲜橙产品</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
    </div>
  </div>
  <!--页面头部结束-->
  <div class="clearfloat"></div>
  <!--页面中间开始-->
  <div class="main">
    <!--页面中间导航开始-->
	<s:form action="IndexAction" cssStyle="margin:0 auto; padding:0px;" />
    <div id="main_nav">
    	<div id="showPic1" style="position:absolute; display:block;" class="picCurrent"><img src="upload${pic1}" width="960" height="398"/></div>
			
        <div id="showPic2" style="position:absolute; display:none;" class="picHidden"><img src="upload${pic2}" width="960" height="398"/></div>

        <div id="showPic3" style="position:absolute; display:none;" class="picHidden"><img src="upload${pic3}" width="960" height="398"/></div>
        <div id="showPic4" style="position:absolute; display:none;" class="picHidden"><img src="upload${pic4}" width="960" height="398"/></div>
    </div>
    <div id="main_nav_text">
      <ul>
        <li id="showLi1" onclick="showPic(this)" style="backgroud:url(image/mask_big_focus.png);"><div style="margin-left:15px; margin-top:20px; margin-right:18px;"><a>${desc1}</a></div></li>
        <li id="showLi2" onclick="showPic(this)"><div style="margin-left:15px; margin-top:20px; margin-right:18px;"><a>${desc2}</a></div></li>
        <li id="showLi3" onclick="showPic(this)"><div style="margin-left:15px; margin-top:20px; margin-right:18px;"><a>${desc3}</a></div></li>
        <li id="showLi4" onclick="showPic(this)"><div style="margin-left:15px; margin-top:20px; margin-right:18px;"><a>${desc4}</a></div></li>
      </ul>
    </div>
    <!--页面中间导航结束-->
    <!--页面中间内容开始-->
    <div id="main_left" >
      <div style="margin-top:10px;padding-bottom:10px;font-family:Microsoft Yahei;width:700px; float:left;margin-left:3px;"><span style="line-height=1.5"><span style="color:#ea5404;line-height=1.5">鲜橙</span>始终秉承其<span style="color:#ea5404;line-height=1.5">"国际视野，中国洞察"</span>的宗旨，致力成为一家国际性的<span style="color:#ea5404;line-height=1.5">专业品牌传播机构</span>，以全新的品牌传播理论引领<span style="color:#ea5404;line-height=1.5">中国品牌设计潮流</span>。</span></div>
      <div class="clearfloat"></div>
      <div id="brandImage">
      	<ul style="margin-top:95px;">
        	<li><a><img src="image/logo/logo-01.jpg"/></a></li>
            <li><a><img src="image/logo/logo-02.jpg"/></a></li>
            <li><a><img src="image/logo/logo-03.jpg"/></a></li>
			<li><a><img src="image/logo/logo-04.jpg"/></a></li>
			<li><a><img src="image/logo/logo-05.jpg"/></a></li>
        </ul>
        <ul>
        	<li><a><img src="image/logo/logo-06.jpg"/></a></li>
            <li><a><img src="image/logo/logo-07.jpg"/></a></li>
            <li><a><img src="image/logo/logo-08.jpg"/></a></li>
			<li><a><img src="image/logo/logo-09.jpg"/></a></li>
			<li><a><img src="image/logo/logo-10.jpg"/></a></li>
        </ul>
        <ul>
        	<li><a><img src="image/logo/logo-11.jpg"/></a></li>
            <li><a><img src="image/logo/logo-12.jpg"/></a></li>
            <li><a><img src="image/logo/logo-13.jpg"/></a></li>
			<li><a><img src="image/logo/logo-14.jpg"/></a></li>
			<li><a><img src="image/logo/logo-15.jpg"/></a></li>
        </ul>
        <ul>
        	<li><a><img src="image/logo/logo-16.jpg"/></a></li>
            <li><a><img src="image/logo/logo-17.jpg"/></a></li>
            <li><a><img src="image/logo/logo-18.jpg"/></a></li>
		
        </ul>
        <div class="clearfloat"></div>
        <div style="margin-left:570px; margin-top:30px;">
        	<a href="service.jsp"><img style="border:none;" src="image/button_more.png" /></a>
        </div>
      </div>
    </div>
    <div style="margin-top:-8px;background:url(image/fenge.png) no-repeat; width:2px; height:560px; float:left;"></div>
    <div id="main_right">
		<div id="mainMaskBigBac" style=" margin-top:0px; position:absolute; height:560px; background-color:#D5D5D5; overflow:visible; z-index:-100;"></div>
    	<img src="image/telephone.png" />
        <div style="margin:0 auto; padding:0px; margin-top:-20px; margin-left:10px;">
			<ul style="list-style:none; margin-top:-5px;">
            	<li><a style="color:#388c00; font-size:14px;">深圳公司</a></li>
                <li><div style="margin-top:10px; font-size:12px;"><a style="">深圳市罗湖区深南东路1号</a></div></li>
                <li><a style="font-size:12px;">经泽大厦7B05</a></li>
                <li><a style="color:#388c00; font-size:12px;">Tel:0755-2542-1850</a></li>
            </ul>
        	<ul style="list-style:none;">
            	<li><a style="color:#388c00; font-size:14px;">北京公司</a></li>
                <li><div style="margin-top:10px; font-size:12px;"><a style="">北京市朝阳区紫玉东路1号</a></div></li>
                <li><a style="font-size:12px;">紫玉山庄J8-607</a></li>
                <li><a style="color:#388c00; font-size:12px;">Tel:010-6497-3519</a></li>
            </ul>
            <ul style="list-style:none; margin-top:-5px;">
            	<li><a style="color:#388c00; font-size:14px;">上海公司</a></li>
                <li><div style="margin-top:10px; font-size:12px;"><a style="">上海市浦东新区商城路297号</a></div></li>
                <li><a style="font-size:12px;">申金大厦3506</a></li>
                <li><a style="color:#388c00; font-size:12px;">Tel:021-5840-9289</a></li>
            </ul>
            <ul style="list-style:none; margin-top:-5px;">
            	<li><a style="color:#388c00; font-size:14px;">东莞公司</a></li>
                <li><div style="margin-top:10px; font-size:12px;"><a style="">东莞市松山湖</a></div></li>
                <li><a style="font-size:12px;">创意生活城商场B28--31号</a></li>
                <li><a style="color:#388c00; font-size:12px;">Tel:0769-23077528  23077538</a></li>
            </ul>
        </div>
		
    </div>
    
    <div class="clearfloat"></div>
    
    <!--页面中间内容结束-->
  </div>
  <!--页面中间结束-->
  <div class="clearfloat"></div>
  <!--页面底部开始-->
  <div class="footer">
    <div id="footer_nav">
      <ul>
        <li><a href="index.action">首页</a></li>
        <li><a href="about.html">关于鲜橙</a></li>
        <li><a href="LoadCase.action">鲜橙案例</a></li>
        <li><a href="service.jsp">鲜橙服务</a></li>
        <li><a href="LoadProduct.action">鲜橙产品</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
      <div style="margin-left:80px; margin-top:37px;"><span style="font-size:12px; color:#696969; font-weight:bold;"> © 2011 SUNSUM All rights reserved.</span></div>
    </div>
  </div>
  <!--页面底部结束-->
</div>
<div id="footerMaskBac" style=" margin-top:-120px; position:absolute; height:120px; background:url(image/footerBac_ext.png) repeat; overflow:visible; z-index:-100;"></div>
<!--页面内容结束-->

</body>
</html>
